<template>
    <a-modal
        title="设置角色权限"
        :visible="isShowModal"
        width="30%"
        :footer="null"
        dialogClass="custom-modal"
        @cancel="handleCancel"
        :maskClosable="false"
    >
        <a-spin :spinning="modalLoading">
            <a-form-model
                :model="form"
                ref="form"
                :labelCol="{ span: 4 }"
                :wrapperCol="{ span: 20 }"
                :rules="rules"
                :colon="false"
                labelAlign="left"
            >
                <a-row :gutter="40" class="ant-tree-wrapper">
                    <!-- <span class="danger-color">*</span> -->
                    菜单配置
                    <a-form-model-item label="" prop="menuCheckedKeys">
                        <a-tree
                            checkable
                            defaultExpandAll
                            :tree-data="permissionList"
                            :checkedKeys="form.menuCheckedKeys"
                            :key="treeKey"
                            checkStrictly
                            @check="onMenuCheck"
                            :replace-fields="{
                                children: 'children',
                                title: 'label',
                                key: 'id',
                            }"
                        ></a-tree>
                    </a-form-model-item>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
    </a-modal>
</template>
<script>
import { menusApi, rolesApi } from '../../../../common/api/setting'
import { getTreeData, getEffectIds, sortMinToNull } from '../../../../utils/methods'
const sortMenu = data => {
    const sort = list => {
        list = sortMinToNull(list)
        list.forEach(item => {
            if (item.children?.length) {
                sort(item.children)
            }
        })
    }
    sort(data)
    return data
}
export default {
    data() {
        return {
            confirmLoading: false,
            permissionList: [],
            individuationTemplateList: [],
            modalLoading: false,
            treeKey: 0,
            form: {
                menuCheckedKeys: [],
                loginType: [],
                loginTerminal: [],
                rememberPhone: [], // 记住登录手机号
                inspectorStyle: undefined, // 扫码督查展示列表
                individuationTemplate: undefined, // 个性化展示模板
                isCall: false,
            },
            right: {
                labelCol: { span: 6 },
                wrapperCol: { span: 10 },
            },
            rules: {
                menuCheckedKeys: [{ required: false, message: '请选择菜单', trigger: 'change' }],
                loginType: [{ required: false, message: '请选择登陆方式', trigger: 'change' }],
                loginTerminal: [{ required: false, message: '请选择登陆终端', trigger: 'change' }],
                inspectorStyle: [{ required: false, message: '请选择扫码督查展示方式', trigger: 'change' }],
            },
        }
    },
    components: {},
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: true,
            type: [Object, undefined],
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                }
            },
        },
    },
    beforeDestroy() {},
    methods: {
        onMenuCheck(checkedKeys) {
            const { checked } = checkedKeys
            this.form.menuCheckedKeys = checked
        },
        beforeShowModal() {
            this.modalLoading = true
            Promise.all([menusApi.get(), rolesApi.getPermissions({ roleId: this.currRow.id })])
                .then(
                    ([
                        { data: menus },
                        {
                            data: { permissionIds },
                        },
                    ]) => {
                        this.permissionList = sortMenu(getTreeData(menus, 'id', 'permissionPid'))
                        this.form.menuCheckedKeys = getEffectIds(this.permissionList, permissionIds)
                        this.treeKey++
                    },
                )
                .catch(e => {
                    console.log(e)
                })
                .finally(() => {
                    this.modalLoading = false
                })
        },
        async save() {
            const saveRolePromise = async () => {
                await rolesApi
                    .postPermissions({
                        roleId: this.currRow.id,
                        permissionIds: this.form.menuCheckedKeys,
                    })
                    .then(() => {
                        this.$message.success('菜单配置成功')
                    })
            }

            await Promise.all([saveRolePromise()])
        },
        async handleOk() {
            this.confirmLoading = true
            try {
                this.save()
            } catch (e) {
                console.log(e)
            }
            this.confirmLoading = true
            this.$emit('update:isShowModal', false)
            this.confirmLoading = false
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped lang="scss">
/deep/.ant-spin-nested-loading > div > .ant-spin {
    height: 400px;
}
.col {
    height: 580px;
    overflow: auto;
}
.ant-tree-wrapper {
    padding: 0 10%;
}
</style>
